import { connect } from 'react-redux'
import { Dispatch } from 'redux'
import { setVisibilityFilter } from '@/redux-saga/action'
import { RootState } from '@/redux-saga/reducers'
import { Space, Button } from 'antd'

interface FooterType {
	filter: string
}
// ownProps 即父组件传来的 filter
const mapStateToProps = (state: RootState, ownProps: FooterType) => {
	return {
		active: ownProps.filter === state.visibilityFilter // tab 高亮
	}
}
const mapDispatchToProps = (dispatch: Dispatch, ownProps: FooterType) => {
	return {
		setType: () => dispatch(setVisibilityFilter(ownProps.filter)) // 设置列表（完成/未完成/全部）
	}
}
interface Ilink {
	active: boolean // mapStateToProps active
	setType: () => void // mapDispatchToProps onClick
	children: React.ReactNode
}
const Link: React.FC<Ilink> = ({
	active, // mapStateToProps active
	children, // 传入的文字
	setType // mapDispatchToProps onClick
}) => {
	return (
		<Button type="primary" color={active ? 'danger' : 'primary'} variant="solid" onClick={setType}>
			{children}
		</Button>
	)
}
const FLink = connect(mapStateToProps, mapDispatchToProps)(Link)
const Footer = () => (
	<Space>
		<FLink filter="SHOW_ALL">All</FLink>
		<FLink filter="SHOW_ACTIVE">Active</FLink>
		<FLink filter="SHOW_COMPLETED">Completed</FLink>
	</Space>
)
export default Footer
